import Loading from '@/components/Loading/index';
import { goProductDetail } from '@/utils/index';
import { View } from '@tarojs/components';
import classNames from 'classnames';
import React from 'react';
import Icon from '../../Icon';
import { defaultVisibleEnums } from '../../moduleConstants';
import {
  recommendGoodsCartStyle,
  recommendGoodsGoodsAlign,
  recommendGoodsStyle,
} from '../constants';
import ProductImg from '../ProductImg';
import ProductLabel from '../ProductLabel';
import ProductTitle from '../ProductTitle';
import SplitPrice from '../SplitPrice';
import styles from './index.module.scss';

const GoodsStyleName = {
  [recommendGoodsStyle.line]: 'flatten',
  [recommendGoodsStyle.card]: 'cards',
  [recommendGoodsStyle.border]: 'border',
};

const LeftPanel = ({ content, product }) => {
  const { scribingPrice, price, saleNum } = product;

  const getCartStyle = () => {
    if (content?.showCart !== defaultVisibleEnums.show) {
      return null;
    }

    if (content?.cartStyle === recommendGoodsCartStyle.one) {
      return <Icon name="icon_shopping" className="goods-cart" size={34} />;
    }

    if (content?.cartStyle === recommendGoodsCartStyle.two) {
      return <Icon name="icon_add" className="goods-cart" size={34} />;
    }

    return null;
  };

  return (
    <View className="goods-panel goods-left-panel">
      <View className="goods-title-wrap">
        <ProductTitle {...{ content, product }} />
      </View>

      <View>
        {content?.showGoodsSaleNum === defaultVisibleEnums.show && (
          <View className="goods-sales">已售{saleNum ?? 0}件</View>
        )}

        <View className="goods-line">
          <View className="goods-price omit">
            <SplitPrice price={price} />

            {content?.showSalePrice === defaultVisibleEnums.show && scribingPrice !== undefined && (
              <View className="del-price">¥{scribingPrice}</View>
            )}
          </View>

          {getCartStyle()}
        </View>
      </View>
    </View>
  );
};

const CenterPanel = ({ content, product }) => {
  const { price } = product;

  return (
    <View className="goods-panel goods-center-panel">
      <View className="goods-title-wrap">
        <ProductTitle {...{ content, product }} />
      </View>

      <View className="goods-line">
        <SplitPrice price={price} className="sale-price" />

        <View
          className={classNames('goods-cart customePageBackgroundStyle', {
            borderRadius: content.cartStyle === recommendGoodsCartStyle.third,
          })}
        >
          <View className="txt">{content?.cartText}</View>
        </View>
      </View>
    </View>
  );
};

const ModuleGoodsTwoColumn = ({
  styleSettingRender,
  content,
  style,
  styleSetting,
  productList,
  isFinished,
  isShowLoading,
  isLoading = !isFinished,
}) => {
  return (
    <View className={styles.ModuleGoodsTwoColumn} style={{ ...style.module, ...style.background }}>
      <View
        className={classNames('goods-container', {
          [GoodsStyleName[styleSettingRender.goodsStyle]]: true,
        })}
      >
        {productList?.map((product) => {
          const { id, url, label, isSoldOut } = product;
          const panelProps = { content, product };

          return (
            <View
              className="goods-item"
              key={id}
              style={{...style.item,width: `calc(50% - ${styleSetting.goodsMargin || 0}px)`,marginBottom:`${styleSetting.goodsMargin+(styleSetting.goodsMargin/2) || 0}px`}}
              onClick={() => goProductDetail(product)}
            >
              <ProductLabel label={label} />

              <ProductImg
                {...{
                  className: 'goods-img-wrap',
                  content,
                  style,
                  url,
                  isSoldOut,
                  fontSize: 33,
                }}
              />

              {content?.goodsAlign === recommendGoodsGoodsAlign.left && (
                <LeftPanel {...panelProps} />
              )}
              {content?.goodsAlign === recommendGoodsGoodsAlign.center && (
                <CenterPanel {...panelProps} />
              )}
            </View>
          );
        })}
      </View>

      {isShowLoading && (
        <Loading loading={isLoading} finished={isFinished && productList?.length >= 9} />
      )}
    </View>
  );
};

export default ModuleGoodsTwoColumn;
